<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
        }

        img {
            width: 40px;
            height: 40px;
        }

        #down {
            position: absolute;
            top: 25px;
        }

        #box {
            height: 40px;
            overflow: hidden;
            position: absolute;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <!--<input v-model.number="score">-->
        <input v-model.number="second">
        <com :score="score" :second="second" @input="input"></com>
    </div>
</body>
<script src="./vue.js"></script>
<script type="text/html" id="com">
    <div>
        <div id="up">
            <img src="./2.png" alt="" v-for="n in 5" @click="click(n)">
        </div>
        <div id="down">
            <img src="./1.png" alt="" v-for="n in Math.floor(second)" @click="click(n)">
            <div id="box" :style="secondStyle">
                <img src="./1.png">
            </div>

        </div>
    </div>
</script>
<script>
    Vue.component("com", {
        template: "#com",
        props: ["score", "second"],
        computed: {
            secondStyle: function () {
                if ((this.second % Math.floor(this.second)) != 0) {
                    return {
                        left: Math.floor(this.second) * 40 + 'px',
                        width: 40 * (this.second % Math.floor(this.second)) + 'px',
                    }
                }
                else {
                    return {
                        width: 0,
                    }
                }
            }
        },
        methods: {
            click: function (a) {
                console.log(a)
                this.$emit("input", a);

            },


        }
    })
    new Vue({
        el: "#app",
        data: {
            score: 5,
            second: 1,
        },
        methods: {
            input: function (e) {
                this.score = e;
                this.second = e;
            }
        }
    })

</script>

</html>